Reading

There is a number of useful hooks that you can use to read blockchain state, such us:

• useBlockMeta() - return meta information (timestamp and difficulty) about most recent block mined
• useEtherBalance(address) - returns ether balance as BigNumber for given address (or undefined)
• useTokenBalance(tokenAddress, address) - returns balance of a given token as BigNumber for given address (or undefined)
• useTokenAllowance(tokenAddress, ownerAddress, spenderAddress) - returns allowance of a given token as BigNumber for given owner and spender address pair (or undefined)

Examples

Ether balance

useEtherBalance(address: string)

Provides a way to fetch the account balance. Takes the account address as an argument and returns BigNumber or undefined when data is not available (i.e. not connected). To obtain currently connected account employ useEthers().

App.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { formatEther } from '@ethersproject/units'
import { Mainnet, DAppProvider, useEtherBalance, useEthers, Config, Goerli } from '@usedapp/core'
import { getDefaultProvider } from 'ethers'

const config: Config = {
  readOnlyChainId: Mainnet.chainId,
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Goerli.chainId]: getDefaultProvider('goerli'),
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

const ConnectButton = () => {
  const { account, deactivate, activateBrowserWallet } = useEthers()
  // 'account' being undefined means that we are not connected.
  if (account) return <button onClick={() => deactivate()}>Disconnect</button>
  else return <button onClick={() => activateBrowserWallet()}>Connect</button>
}

export function App() {
  const { account, chainId } = useEthers()
  const etherBalance = useEtherBalance(account)
  if (chainId && !config.readOnlyUrls[chainId]) {
    return <p>Please use either Mainnet or Goerli testnet.</p>
  }

  return (
    <div>
      <ConnectButton />
      {etherBalance && (
        <div className="balance">
          <br />
          Ether balance:
          <p className="bold">{formatEther(etherBalance)} ETH</p>
        </div>
      )}
    </div>
  )
}

Token balance

useTokenBalance(address: string, tokenAddress: string)

Provides a way to fetch balance of ERC20 token specified by tokenAddress for provided address. Returns BigNumber or undefined when data is not available.

App.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { formatEther } from '@ethersproject/units'
import { Mainnet, DAppProvider, useTokenBalance, useEthers, Config, Goerli } from '@usedapp/core'
import { getDefaultProvider } from 'ethers'

const DAI = {
  [Mainnet.chainId]: '0x6b175474e89094c44da98b954eedeac495271d0f',
  [Goerli.chainId]: '0x5C221E77624690fff6dd741493D735a17716c26B',
}

const config: Config = {
  readOnlyChainId: Mainnet.chainId,
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Goerli.chainId]: getDefaultProvider('goerli'),
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <TokenBalance />
  </DAppProvider>,
  document.getElementById('root')
)

const ConnectButton = () => {
  const { account, deactivate, activateBrowserWallet } = useEthers()
  // 'account' being undefined means that we are not connected.
  if (account) return <button onClick={() => deactivate()}>Disconnect</button>
  else return <button onClick={() => activateBrowserWallet()}>Connect</button>
}

export function TokenBalance() {
  const { account, chainId } = useEthers()
  const daiBalance = useTokenBalance(DAI[chainId], account)
  if (chainId && !config.readOnlyUrls[chainId]) {
    return <p>Please use Mainnet for this example to work.</p>
  }

  return (
    <div>
      <ConnectButton />
      {daiBalance && (
        <div className="balance">
          Dai balance:
          <p className="bold">{formatEther(daiBalance)}</p>
        </div>
      )}
    </div>
  )
}

Custom Hooks

See the Custom Hooks guide if you need to read state not supported by the built-in hooks.

Reading without a browser wallet

In order to interact with the blockchain in a read-only mode without a browser wallet, just specify readOnlyChainId and readOnlyUrls in your config - no activation required.

App.tsx

import { formatEther } from '@ethersproject/units'
import { Config, DAppProvider, Goerli, Mainnet, useEtherBalance } from '@usedapp/core'
import { getDefaultProvider } from 'ethers'
import React from 'react'
import ReactDOM from 'react-dom'

const STAKING_CONTRACT = '0x00000000219ab540356cBB839Cbe05303d7705Fa'

const config: Config = {
  readOnlyChainId: Mainnet.chainId,
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Goerli.chainId]: getDefaultProvider('goerli'),
  },
}

ReactDOM.render(
  <DAppProvider config={config}>
    <App />
  </DAppProvider>,
  document.getElementById('root')
)

export function App() {
  const etherBalance = useEtherBalance(STAKING_CONTRACT)

  return (
    <div>
      {etherBalance && (
        <div className="balance">
          Staking contract balance:
          <p className="bold">{formatEther(etherBalance)} ETH</p>
        </div>
      )}
    </div>
  )
}